<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- <div class="box" onclick="alert(11111)"></div>
    <a href="javascript:alert(22222);">点击</a> -->

    <div class="box"></div>
</body>
<script>
    // 给一个元素绑定事件的方法
    // 1.  内联JS绑定事件  => 不常用(代码写在标签内 可读性差 后期维护成本高)

    // 2.  DOM一级事件 (赋值式)  => 一个元素只能绑定一个相同类型的事件(重复绑定 后面会覆盖前面的)

    // 3.  DOM二级事件(事件监听绑定事件)  =>  可以给一个元素绑定多个相同类型的事件
    // ele.addEventListener(eventType,callback)  添加事件监听
    // eventType  => 绑定事件的类型 (click dblclick keydown load)
    // callback   => 事件触发时执行的函数



    // DOM一级事件 (赋值式) 
    // var box = document.getElementsByClassName("box")[0];
    // box.onclick = function(){
    //     alert(11111);
    // }

    // box.onclick = function(){
    //     alert(22222);
    // }


    
    // 回调函数:把函数作为一个参数传到另一个函数中, 让它在另一个函数内执行 (传入的函数具体什么时候执行 看内部代码执行流程)
    // setInterval(function(){},2000)
    
    var box = document.getElementsByClassName("box")[0];
    box.addEventListener("click",function(e){
        console.log("e",e);
        console.log("this",this); // 指向绑定事件的元素 (this 内部做了处理,改变了原本的this指向 => 将this指向绑定事件的元素)
    })
    
    box.addEventListener("click",function(e){
        console.log("随机颜色");
        this.style.backgroundColor = randColor();
    })

    function randColor() {
        var str = "0123456789abcdef";

        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * 16); // 0-15的随机数 (下标)
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }
</script>
</html>